<template>
  <div>
    <div class="common-layout">
      <el-container>
        <!--  这里是侧边栏 -->
        <el-aside>
          <el-timeline style="max-width: 600px">
            <el-timeline-item timestamp="Personal Information" placement="top">
              <!-- 这里是个人信息页面链接 -->
              <router-link to="/homepage" class="nav-link">
                <el-card>
                  <h1>个人首页</h1>
                  <p>自定义昵称、密码和个人头像</p>
                </el-card>
              </router-link>
            </el-timeline-item>
            <el-timeline-item timestamp="Projects" placement="top">
              <!-- 这里是个人项目列表页面链接 -->
              <router-link to="/project" class="nav-link">
                <el-card>
                  <h1>个人项目列表</h1>
                  <p>个人项目列表：显示项目名称，能够对项目进行详情查看，修改项目信息和删除项目</p>
                </el-card>
              </router-link>
            </el-timeline-item>
            <el-timeline-item timestamp="Donation Records" placement="top">
              <!-- 这里是消息中心页面链接 -->
              <router-link to="/donation" class="nav-link">
                <el-card>
                  <h1>捐款记录</h1>
                  <p>捐款记录：对项目捐款记录的查看，不支持删除和修改</p>
                </el-card>
              </router-link>
            </el-timeline-item>
            <!-- <el-timeline-item timestamp="Message Center" placement="top">
              <router-link to="/message" class="nav-link">
                <el-card>
                  <h1>消息中心</h1>
                  <p>接收到的系统提示（测试，有bug）</p>
                </el-card>
              </router-link>
            </el-timeline-item> -->
          </el-timeline>
        </el-aside>
        <!--  这里是主体内容 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {}
</script>
<style scoped>
.el-container {
  margin:10px 100px;
  height: 800px;
}
.el-aside {
  width:400px;
  height:100%;
  background-color: #ffffff;
  padding-top:30px;
  padding-right: 20px;
}
.el-main{
  /* 左边侧边竖线 */
  border-left: 2px solid #d1d1d1;
  background-color: #ffffff;
  padding: 20px;
}
.el-card{
  cursor: pointer;
}
/* 去掉默认的下划线 */
.nav-link {
  text-decoration: none;
  color: inherit; /* 默认颜色 */
}
/* 定义激活时的字体颜色 */
.nav-link.router-link-active,
.nav-link.router-link-exact-active .el-card h1 {
  color: rgb(57,197,187); /* 激活时的颜色 */
}
.nav-link.router-link-active .el-card,
.nav-link.router-link-exact-active .el-card {
  border-color: rgb(57,197,187); /* 激活时的边框颜色 */
  border-block: 1px;
}
</style>
